<template>
  <div id="shouyeCategroy" style="width: 100%; height: 100%">
    <!-- 搜索页 -->
    <div class="bannerdata">
      <div class="searchForm">
        <el-form :inline="true" :model="params" class="demo-form-inline">
          <el-form-item label="标题">
            <el-input
              v-model="params.title"
              placeholder="按标题查找"
              class="block"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" @click="getList(1)"
              >查询</el-button
            >
            <el-button type="primary" icon="el-icon-plus" @click="add"
              >增加</el-button
            >
            <el-button type="danger" icon="el-icon-delete" @click="removeMore"
              >批量删除</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 表格 -->
    <div class="bannerdata">
      <el-table
        :data="rows"
        height="500"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="img" label="头图">
          <template slot-scope="scope">
            <img
              style="
                width: 80px;
                height: 80px;
                max-width: 100%;
                max-height: 100%;
              "
              v-if="scope.row.img"
              :src="scope.row.img"
            />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题"> </el-table-column>
        <el-table-column prop="digest" label="摘要"> </el-table-column>
        <el-table-column prop="status" label="是否启用">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="statusChange(scope.row)"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="hot" label="是否热门">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.hot"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="hotChange(scope.row)"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="320">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              style="margin-right: 16px"
              @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-popconfirm
              title="确定删除此数据吗？"
              @confirm="remove(scope.row)"
            >
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-refresh-right"
                slot="reference"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 四百条消息 -->
    <div style="margin-top: 30px" class="block">
      <el-pagination
        @size-change="sizeChange"
        @current-change="getList"
        :current-page="params.pageNum"
        :page-sizes="[5, 10, 20, 50, 100]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <NewsEdit @load="getList" ref="newsEditer"></NewsEdit>
  </div>
</template>

<script>
import NewsEdit from "./newsEdit.vue";
export default {
  name: "News",
  components: {
   NewsEdit,
  },
  data() {
    return {
      params: {
        title: "",
        type: "news",
        pageNum: 1,
        pageSize: 10,
      },
      rows: [],
      total: 0,
      selecteds: [],
    };
  },
  methods: {
    add() {
      this.$refs.newsEditer.add();
    },
    edit(row) {
      this.$refs.newsEditer.edit(row);
    },
    ///获取列表
    getList(pageNum) {
      if (pageNum) this.params.pageNum = pageNum;
      this.$http({
        url: "/admin/index/news",
        params: this.params,
      }).then((res) => {
        this.total = res.total;
        this.rows = res.rows;
      });
    },
    ///启用停用
    statusChange(row) {
      this.$http({
        url: "/admin/index/news",
        method: "PUT",
        data: {
          indexId: row._id,
          status: row.status,
        },
      }).then((res) => {
        if (res.errorMsg) {
          this.getList();
        }
      });
    },
    ///热门启用停用
    hotChange(row) {
      this.$http({
        url: "/admin/index/news",
        method: "PUT",
        data: {
          indexId: row._id,
          hot: row.hot,
        },
      }).then((res) => {
        if (res.errorMsg) {
          this.getList();
        }
      });
    },
    //修改pageSize
    sizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.getList(1);
    },
    ///删除数据
    remove(row) {
      this.$http({
        url: "/admin/index/news",
        method: "DELETE",
        params: { indexId: row._id },
      }).then((res) => {
        if (!res.errorMsg) {
          this.getList(1);
        }
      });
    },
    handleSelectionChange(rows) {
      ///存储选中数据
      this.selecteds = rows;
    },
    ///批量删除
    removeMore() {
      ///获取被选中的数据
      let chekedRowsPrmose = [];
      let success = [],
        fail = [];
      for (let i = 0; i < this.selecteds.length; i++) {
        chekedRowsPrmose.push(
          new Promise((resovle) => {
            let row = this.selecteds[i];
            this.$http({
              url: "/admin/index/news",
              method: "DELETE",
              params: { indexId: row._id },
            }).then((res) => {
              if (!res.errorMsg) {
                success.push(row._id);
              } else {
                fail.push(row._id);
              }
              resovle();
            });
          })
        );
      }
      ///删除
      Promise.all(chekedRowsPrmose).then(() => {
        this.$message({
          message: `批量删除完成,成功删除${success.length}条数据,删除失败${fail.length}条数据`,
          // type:'success',
          duration: 3000,
        });
        this.getList(1);
      });
    },
  },
  created() {
    this.getList();
  },
  mounted() {},
};
</script>



<style>
.bannerdata {
  width: 1355px;
}
</style>